<template>
    <el-card>
        <div slot="header">系统设置</div>
        <el-form ref="config" :rules="rules" :model="form" label-width="120px">
            <el-form-item label="用户协议" prop="userAgreement">
                <el-input
                        type="textarea"
                        :rows="4"
                        placeholder="请输入内容"
                        v-model="form.userAgreement">
                </el-input>
            </el-form-item>
            <el-form-item label="迎新短消息标题" prop="newUserMessageTitle">
                <el-input
                        placeholder="请输入标题"
                        v-model="form.newUserMessageTitle">
                </el-input>
            </el-form-item>
            <el-form-item label="迎新短消息内容" prop="newUserMessageContent">
                <el-input
                        type="textarea"
                        :rows="4"
                        placeholder="请输入内容"
                        v-model="form.newUserMessageContent">
                </el-input>
            </el-form-item>
            <el-form-item label="开放新账号注册">
                <el-switch
                        v-model="form.allowRegister">
                </el-switch>
            </el-form-item>
            <el-form-item label="截图程序Token" prop="screenshotToken">
                <el-input v-model="form.screenshotToken" disabled style="width: 120px;"/>
                <el-button @click="randomToken">随机生成</el-button>
                <br>
                其它截图程序需要使用这个Token才能连接入本系统。
            </el-form-item>
            <el-form-item>
                <el-button @click="submit()" type="primary" :loading="loading">提交</el-button>
            </el-form-item>
            <el-form-item>
                <my-alert ref="alert"/>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
    import MyAlert from "../component/my_alert";
    import shortid from 'shortid';

    export default {
        components: {MyAlert},
        data() {
            function validator(rule, value, callback) {
                console.log({value})
                if (!value || value.length === 0)
                    return callback(new Error('必填'));
                callback();
            };
            return {
                loading: true,
                form: {
                    userAgreement: '',
                    newUserMessageTitle: '',
                    newUserMessageContent: '',
                    allowRegister: false,
                    screenshotToken: '',
                },
                rules: {
                    userAgreement: [{required: true, validator, trigger: 'blur'}],
                    newUserMessageTitle: [{required: true, validator, trigger: 'blur'}],
                    newUserMessageContent: [{required: true, validator, trigger: 'blur'}],
                    screenshotToken: [{required: true, validator, trigger: 'blur'}],
                }
            };
        },
        methods: {
            fetch() {
                this.$http.get('/api/config').then(res => {
                    this.loading = false;
                    this.form = res.data;
                });
            },
            submit() {
                this.$refs['config'].validate(valid => {
                    if (!valid)
                        return;
                    this.loading = true;
                    this.$refs.alert.hide();
                    this.$http.post('/api/config', this.form).then(res => {
                        this.loading = false;
                        this.$refs.alert.success('保存成功', 1500);
                    }).catch(err => {
                        this.loading = false;
                        this.$refs.alert.error(err.response.data);
                    });
                })
            },
            randomToken() {
                this.$confirm('提交修改后才会生效', '确认更换Token？', {type: 'warning'}).then(() => {
                    this.form.screenshotToken = shortid.generate();
                });
            }
        },
        mounted() {
            this.fetch();
        }
    }
</script>

<style scoped>

</style>